import React from 'react';
import { Row, Col, Menu } from 'antd';
import { UserCenterGate } from './usercentergate';

const { SubMenu } = Menu;

export default class HomeHeader extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            navList: [
                { key: 'home', title: '首页' },
                { key: 'work', title: '工作' },
                { key: 'study', title: '学习' },
                { key: 'life', title: '生活' },
                { key: 'more',
                    title: '更多',
                    submenu: [
                        { key: 'ideas', title: '我的创意' },
                        { key: 'travel', title: '我的旅行' }
                    ] }
            ]
        };
    }

    renderMenu(arr) {
    // 渲染顶部导航栏
        return arr.map((item) => {
            let { submenu, title, key } = item;
            if (submenu && submenu.length > 0) {
                return (
                    <SubMenu key={key} className="home-header-menu-item"
                        title={title}
                    >
                        {this.renderMenu(submenu)}
                    </SubMenu>
                )
            }
            return <Menu.Item key={key} className="home-header-menu-item">{title}</Menu.Item>
        })
    }

    render() {
        return (
            <Row className="home-header">
                <Col span={4}>
                    <img
                        alt="EDaily"
                        className="home-header-logo"
                        src={require('static/logo/edaily_logo_nav_transparent_blue.png')}
                        width="180px"
                    />
                </Col>
                <Col span={16}>
                    <Menu
                        className="home-header-menu"
                        mode="horizontal"
                        onClick={(e) => this.props.menuClick(e)}
                        selectedKeys={[this.props.current]}
                    >
                        {this.renderMenu(this.state.navList)}
                    </Menu>
                </Col>
                <Col span={4}><UserCenterGate onMenuClick={(e) => this.props.menuClick(e)} /></Col>
            </Row>
        )
    }
}
export { HomeHeader };